import React from "react";
import { useLoaderData, useParams } from "react-router-dom";
import { Tag } from "antd-mobile";

import styles from "../css/citytop.module.css";
import { LocationFill } from "antd-mobile-icons";

function CityTop(props) {
  let { location, hot } = useLoaderData();
  let params = useParams();
  return (
    <div className={styles.box}>
      <div className={styles.local}>
        <span>当前城市：</span>
        {/* 小图标 */}
        <LocationFill color="#15a5c9" fontSize={18} />
        <span
          className={styles.localName}
          onClick={() => props.saveCity(params.type, location)}
        >
          {location}
        </span>
      </div>
      <div className={styles.hotBox}>
        <div className={styles.hot}>热门城市</div>
        <div className={styles.city}>
          {hot.map((item, i) => (
            <Tag
              key={i}
              color="#efefef"
              className={styles.item}
              onClick={() => props.saveCity(params.type, item.name)}
            >
              {item.name}
            </Tag>
          ))}
        </div>
      </div>
    </div>
  );
}

export default CityTop;
